export class Magnifier{
    constructor(options){
          this.original = document.querySelector(options.original);
          this.focus = document.querySelector(options.focus);
          this.magnifierImgBox = document.querySelector(options.magnifierImgBox);
          this.magnifierImgBox_bg = document.querySelector(options.magnifierImgBox_bg);
          this.scale = options.scale;
          this.container=document.querySelector(options.magnifierBox);
          // - 为了获取元素的偏移距离，计算正确的focus位置; 
          this.c_off = {
                left : this.container.offsetLeft,
                top  : this.container.offsetTop,
          }
          // offset 家族是没办法测量 display 为none 的元素; 
          this.focus_style = getComputedStyle( this.focus );
          this.original_style = getComputedStyle( this.original );
          this.magnifierImgBox_style = getComputedStyle( this.magnifierImgBox );
          this.magnifierImgBox_bg_style = getComputedStyle( this.magnifierImgBox_bg );
          this.init();
          // 边界数据对象; 
          this.boundary = {
                x : {
                      min : 0,
                      max : parseInt(this.original_style.width) - parseInt(this.focus_style.width)
                },
                y : {
                      min : 0 ,
                      max : parseInt(this.original_style.height) - parseInt(this.focus_style.height)
                }
          }
          this.bindEvent();
    }
    init(){
          this.focus.style.width  =  parseInt(this.original_style.width) * this.scale + "px";
          this.focus.style.height =  parseInt(this.original_style.height) * this.scale + "px";

          this.magnifierImgBox_bg.style.width  = parseInt(this.magnifierImgBox_bg_style.width) * ((1- this.scale)+1) + "px";
          this.magnifierImgBox_bg.style.height = parseInt(this.magnifierImgBox_bg_style.width) * ((1- this.scale)+1) + "px";
           
      }
    
    bindEvent(){
          this.original.addEventListener("mouseover" , ()=>{
                this.show();
          })
          this.original.addEventListener("mouseout" , ()=>{
                this.hide();
          })
          this.original.addEventListener("mousemove" , ( e ) => {
                this.move(e.clientX , e.clientY);
          })
    }
    show(){
          this.focus.style.display = "block";
          this.magnifierImgBox.style.display = "block";
    }     
    hide(){
          this.focus.style.display = "none";
          this.magnifierImgBox.style.display = "none";
    }
    move( x , y ){
          // 如果使用offset会出现 鼠标获取位置的参照物和focus元素定位的参照物不一致; 
          // - 导致元素位移位置不正确; 

          x =  x - this.c_off.left - parseInt(this.focus_style.width) / 2;
          y =  y - this.c_off.top - parseInt(this.focus_style.height) / 2;


          //  边界检测 
          x = x <= this.boundary.x.min ? this.boundary.x.min : x ; 
          x = x >= this.boundary.x.max ? this.boundary.x.max : x ; 

          y = y <= this.boundary.y.min ? this.boundary.y.min : y ; 
          y = y >= this.boundary.y.max ? this.boundary.y.max : y ; 
          
          this.focus.style.left = x + "px";
          this.focus.style.top  = y + "px";


          this.magnifierImgBox_bg.style.left = - x * ( parseInt(this.magnifierImgBox_style.width) / parseInt(this.focus_style.width)) + "px";
          this.magnifierImgBox_bg.style.top  = - y * ( parseInt(this.magnifierImgBox_style.height) / parseInt(this.focus_style.height)) + "px";
    }
    
}
  